<template>
  <div>
    <!--    大模块-->
    <div style="display: flex;margin-top:30px" v-if="showMenu==1">
      <div v-for="item in showOneLevelMenu" :style="{width:showOneLevelMenu.length==5&&cepingDaiBanList.length>0?'16%':'20%'}">
        <span v-if="item.num*1>0" class="bradge-num">{{ item.num * 1 > 99 ? '99+' : item.num }}</span>
        <div class="one-level-menu-box" v-bind:style="{ backgroundImage: 'url('+item.img+')'}"
             @click="fnOpenTwoLevalMenu(item)">
          <div class="one-level-menu-text">
            <div :class="{'mg-l15':item.num*1>0}">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div v-if="cepingDaiBanList.length>0" :style="{width:showOneLevelMenu.length==5&&cepingDaiBanList.length>0?'16%':'20%'}">
        <div class="one-level-menu-box" @click="cepingDf(cepingDaiBanList[0].id)">
          <div class="one-level-menu-text">
            <div class="mg-l15">测评启动</div>
            <!-- <div class="mg-l15">专项工作考核</div> -->
            <!-- <div class="mg-l15">实名打票</div> -->
          </div>
        </div>
      </div>
    </div>
    <!--    二级菜单-->
    <div v-if="showMenu==2">
      <div :class="twoLevelMenu.length==1?'':'flex'" style="overflow:hidden;">
        <div v-for="(item,index) in twoLevelMenu"  class="flex-block" :style="{width:twoLevelMenu.length==1?'400px':'',margin:twoLevelMenu.length==1?'0 auto':'',float:twoLevelMenu.length==1?'none':''}">
          <div style="display: none">{{menuTextFontSize=twoLevelMenu.length>4?(16/twoLevelMenu.length):4}}</div>
          <div class="two-menu-block"
               :style="{backgroundImage: 'url(/img/index/subMenu/'+(index%11+1)+'.png)','fontSize':menuTextFontSize+'vh'}"
               @click="fnOpenTwoLevalMenu(item,twoLevelMenu)">
            <div class="two-menu-block-text">
              <div style="margin-bottom: 15px"><i :class="item.icon" style="font-size: 6vh!important;"></i></div>
              <div v-if="item.name.indexOf('（')!=-1" style="white-space: pre-line;">
                {{ item.name.replace(/（/, "\n（") }}
              </div>
              <div v-else>
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <!--    数据范围选择-->
    <div v-if="showMenu==3">
      <div class="flex menu-block-box">
        <div v-for="(item,index) in dataRangeList" class="flex-block">
          <div style="display: none">{{menuTextFontSize=dataRangeList.length>4?(16/dataRangeList.length):4}}</div>
          <div class="two-menu-block"
               :style="{backgroundImage: 'url(/img/index/subMenu/'+(index%11+1)+'.png)',fontSize:menuTextFontSize+'vh'}"
               @click="fnSelectDataRange(item)">
            <div class="two-menu-block-text">
              <div style="margin-bottom: 15px"><i :class="item.icon" style="font-size: 7vh!important;"></i></div>
              <div>{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    返回按钮-->
    <div class="text-center" style="margin-top: 20px" v-if="showMenu==2||showMenu==3">
      <span class="back-block-text" @click="fnBackLastMenu">返回</span>
    </div>
    <!-- 测评打分 -->
    <cePingIndex ref="cePingIndex" @next="reloadHd" />
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import cePingIndex from '@/page/ceping/leaders/cpIndex-index';
import {wdXuanPiao} from "@/api/ceping/cepinghdglxpxxb";
import {
  wdHuoDong
} from "@/api/ceping/cepinghdglb";
export default {
  name: 'kuaijieRuKou',
  components: {
    cePingIndex
  },
  data() {
    return {
      showMenu: '1',
      showOneLevelMenu: [],
      oneLevelMenu: [
        {id: 1, name: '绩效合同', menuName: '绩效管理', img: '/img/index/hetong.png', path: '4', num: 0, isOpen: true},
        {id: 2, name: '日常考核', menuName: '日常考核', img: '/img/index/kaohe.png', path: '5', num: 0, isOpen: false},
        {id: 3, name: '奖金分配', menuName: '奖金管理', img: '/img/index/jiangjin.png', path: '2', num: 0, isOpen: false},
        {id: 4, name: '测评', menuName: '测评管理', img: '/img/index/ceping.png', path: '1', num: 0, isOpen: true},
        {id: 5, name: '统计分析', menuName: '统计分析', img: '/img/index/tongji.png', path: '3', num: 0, isOpen: false},
        {id: 6, name: '精准激励', menuName: '精准激励', img: '/img/index/kaohe.png', path: '6', num: 0, isOpen: false},
      ],
      twoLevelMenuLast: [],
      twoLevelMenu: [],
      menuTextFontSize: 4,
      menuLevel: 1,
      menuObj: {},
      dataRangeList: [
        {value: '1', name: '本部',icon:'el-icon-school'},
        {value: '0', name: '所属机构',icon:'el-icon-office-building'}
      ],
      haveRangeData:[
        {id:9586,name:'合同创建'},
        {id:9587,name:'指标拟定'},
        {id:9603,name:'指标审核'},
        {id:9604,name:'文本审核'},
        {id:9605,name:'合同审核'},
        {id:9590,name:'填报发起'},
        {id:9591,name:'结果填报'},
        {id:9592,name:'结果汇总'},
        {id:9612,name:'其他奖惩'},
        {id:9606,name:'合同查看'},
        {id:9626,name:'指标变更'},
        {id:9628,name:'受约人变更'},
        {id:9634,name:'任务审核'},
        {id:9635,name:'重点任务发起'},
        {id:9638,name:'重点任务评价'},
        {id:9639,name:'结果汇总'},
        {id:9640,name:'其他奖惩'},
        {id:9641,name:'重点任务查看'},
      ],
      finalMenuObj: {},
      cepingDaiBanList:[]
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'menu', 'menuAll'])
  },
  watch: {
    menu: {
      handler(newVal) {
        this.findFirstMenu()
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.$nextTick(() => {
      if (this.menu.length > 0) {
        this.loadData();
        this.findFirstMenu()
      }
    })
  },
  methods: {
    findFirstMenu() {
      var arr = [];
      this.oneLevelMenu.forEach(item => {
        var obj = this.menu.find(menuItem => menuItem.label == item.menuName) || {};
        if (obj.label == item.menuName) {
          obj.img = item.img;
          obj.isOpen = item.isOpen;
          obj.num = item.num;
          arr.push(obj);
        }
      })
      this.showOneLevelMenu = {...arr};
      this.$forceUpdate();
    },
    //打开二级菜单
    fnOpenTwoLevalMenu(obj, parentData) {
      if (obj.children.length == 0) {
        const arr=this.haveRangeData.filter(item=>item.id==obj.id);
        if(arr.length>0){
          this.showMenu = 3;
          this.finalMenuObj = obj;
          return false;
        }
        this.$router.push({path: obj.path})
      } else {
        this.menuLevel++;
        if (parentData) {
          this.menuObj[this.menuLevel] = parentData;
        } else {
          this.menuObj[this.menuLevel] = [];
        }
        this.twoLevelMenu = obj.children;
      }
      this.showMenu = 2;
    },
    //选择数据范围
    fnSelectDataRange(rangeObj) {
      this.$router.push({path: this.finalMenuObj.path, query: {radioTwo: rangeObj.value}})
    },
    //返回上一级菜单
    fnBackLastMenu() {
      if(this.showMenu==3){
        this.showMenu=2;
        this.finalMenuObj={};
        return false;
      }
      if (this.menuObj[this.menuLevel].length > 0) {
        this.twoLevelMenu = this.menuObj[this.menuLevel];
        this.menuLevel--;
      } else {
        this.showMenu = 1;
      }
    },
    //打开子菜单页面
    fnOpenMenuPage(obj) {
      this.$router.push({path: '/submenu/index'})
    },

    //加载测评待办，如果有数据需要显示实名打票磁力贴
    loadData() {
      wdHuoDong().then(res => {
        this.cepingDaiBanList = res.data.data;
      })
    },
    cepingDf(id) {
      wdXuanPiao(id).then(res => {
        if (res.data.data.length > 0) {
          this.$nextTick(() => {
            this.$refs.cePingIndex.initHd(res.data.data,id);
          });
        }
      })
    },
    reloadHd() {
      wdHuoDong().then(res => {
        this.cepingDaiBanList = res.data.data;
        if (this.cepingDaiBanList.length > 0) {
          this.cepingDf(this.cepingDaiBanList[0].id);
        }
      })
    },
  }
}

</script>

<style scoped>

.one-level-menu-text {
  position: relative;
  color: #fff;
  top: 180px;
  font-size: 4vh;
}

.one-level-menu-box {
  height: 280px;
  text-align: center;
  background: url(/img/index/ceping.png) no-repeat center center;
  background-size: cover;
  border-radius: 10px;
  margin: 0 20px;
  cursor: pointer;
  box-shadow: 0px 0px 10px #b1b1b1;
}

.bradge-num {
  text-align: center;
  color: #fff;
  float: right;
  width: 36px;
  height: 36px;
  line-height: 36px;
  background: #cb0707;
  font-size: 18px;
  border-radius: 100px;
  position: relative;
  top: -20px;
}

.isopen-text {
  font-size: 2vh;
  margin-top: 12px;
  color: #efe8e8
}

.back-block-text {
  background: #28b359;
  padding: 18px 80px;
  font-size: 3vh;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

.two-menu-block {
  height: 26vh;
  text-align: center;
  /*font-size: 35px;*/
  font-size: 4vh;
  font-weight: 600;
  border-radius: 10px;
  background: #238cbe;
  color: #fff;
  display: table;
  width: 100%;
  cursor: pointer;
  background: url(/img/index/subMenu/1.png) no-repeat center center;
  background-size: cover;
  box-shadow: 0px 0px 10px #b1b1b1;
}

.two-menu-block-text {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-weight: 200;
}

.flex-block {
  width: 100%;
  margin: 40px 20px;
}

.menu-block-box {
  margin: 0 30px;
}
</style>
